<div class="password-input right-addon">
  <script type="text/ng-template" id="popover">
      <p>{{ tooltip | translate }}</p>

      <ul>
        <li ng-repeat="rule in rules"
            translate="{{ rule.placeholder }}"
            translate-values="{{ rule.parameter }}"
            ng-if="!rule.valid">
        </li>
      </ul>
  </script>

  <i ng-if="loadingState === 'NOT_OK' && password.length > 0" class="glyphicon glyphicon-remove-circle"></i>
  <i ng-if="loadingState === 'OK'" class="glyphicon glyphicon-ok-circle"></i>
  <i ng-if="loadingState === 'LOADING'" class="glyphicon glyphicon-refresh animate-spin"></i>
  <input id="inputPassword"
    name="inputPassword"
    class="form-control"
    type="password"
    ng-model="password"
    ng-invalid="true"
    uib-popover-template="'popover'"
    popover-enable="loadingState === 'NOT_OK'"
    popover-is-open="loadingState === 'NOT_OK' && password.length > 0"
    popover-trigger="'focus'"
    required></input>
</div>
